<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/css/cs16.min.css" />
    <link rel="stylesheet" href="/src/index.css" />
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <meta name="title" content="cs16.css" />
    <meta
      name="description"
      content="CSS library based on Counter Strike 1.6 UI."
    />
    <meta name="keywords" content="cs 1.6, cs 1.6 css, retro css" />
    <meta name="author" content="Samuel Breznjak" />

    <meta property="og:title" content="cs16.css" />
    <meta
      property="og:description"
      content="CSS library based on Counter Strike 1.6 UI."
    />
    <meta property="og:image" content="/preview.png" />
    <meta property="og:site_name" content="cs16.css" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta
      name="twitter:image:alt"
      content="CSS library based on Counter Strike 1.6 UI."
    />

    <title>cs16.css</title>
  </head>
  <body>
    <header>
      <div class="top">
        <h1>cs16.css</h1>

        <div class="links">
          <a
            href="https://github.com/ekmas/cs16.css"
            target="_blank"
            class="cs-btn gh"
          ></a>
          <a
            href="https://x.com/samuelbreznjak"
            target="_blank"
            class="cs-btn x"
          ></a>
        </div>
      </div>
      <p>CSS library based on Counter Strike 1.6 UI.</p>
    </header>

    <div style="margin-bottom: 10px" class="installation">
      <h2>Installation</h2>

      <p>
        You can install cs16.css simply by pasting this to your html `head` tag:
      </p>

      <div class="code-block">
        <div class="inner">
          <button class="cs-btn">Copy</button>

          <pre><code id="code-block">&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://cdn.jsdelivr.net/gh/ekmas/cs16.css@main/css/cs16.min.css&quot;&gt;</code></pre>
        </div>
      </div>
    </div>

    <main>
      <div>
        <h2>Button</h2>

        <button class="cs-btn">Button</button>
        <button disabled class="cs-btn">Disabled</button>

        <div class="code-block">
          <button class="cs-btn toggle-vision">Show code</button>

          <div class="inner hidden">
            <button class="cs-btn">Copy</button>

            <pre><code id="code-block">&lt;button class="cs-btn"&gt;Button&lt;/button&gt;
&lt;button disabled class="cs-btn"&gt;Disabled&lt;/button&gt;</code></pre>
          </div>
        </div>
      </div>
      <div>
        <h2>Hr</h2>

        <hr class="cs-hr" />

        <div class="code-block">
          <button class="cs-btn toggle-vision">Show code</button>

          <div class="inner hidden">
            <button class="cs-btn">Copy</button>

            <pre><code id="code-block">&lt;hr class=&quot;cs-hr&quot; /&gt;</code></pre>
          </div>
        </div>
      </div>
      <div>
        <h2>Checkbox</h2>

        <div class="cs-checkbox">
          <input id="checkbox" type="checkbox" />
          <label class="cs-checkbox__label" for="checkbox">Checkbox</label>
        </div>

        <div class="code-block">
          <button class="cs-btn toggle-vision">Show code</button>

          <div class="inner hidden">
            <button class="cs-btn">Copy</button>

            <pre><code id="code-block">&lt;div class=&quot;cs-checkbox&quot;&gt;
  &lt;input id=&quot;checkbox&quot; type=&quot;checkbox&quot; /&gt;
  &lt;label class=&quot;cs-checkbox__label&quot; for=&quot;checkbox&quot;&gt;Checkbox&lt;/label&gt;
&lt;/div&gt;</code></pre>
          </div>
        </div>
      </div>
      <div>
        <h2>Input</h2>

        <input class="cs-input" id="input" type="input" />
        <label class="cs-input__label" for="input">First name</label>

        <br />
        <br />

        <input type="text" value="John Doe" class="cs-input" />
        <input type="text" disabled value="disabled" class="cs-input" />

        <div class="code-block">
          <button class="cs-btn toggle-vision">Show code</button>

          <div class="inner hidden">
            <button class="cs-btn">Copy</button>

            <pre><code id="code-block">&lt;input class=&quot;cs-input&quot; id=&quot;input&quot; type=&quot;input&quot; /&gt;
&lt;label class=&quot;cs-input__label&quot; for=&quot;input&quot;&gt;First name&lt;/label&gt;

&lt;br /&gt;
&lt;br /&gt;

&lt;input type=&quot;text&quot; value=&quot;John Doe&quot; class=&quot;cs-input&quot; /&gt;
&lt;input type=&quot;text&quot; disabled value=&quot;disabled&quot; class=&quot;cs-input&quot; /&gt;</code></pre>
          </div>
        </div>
      </div>
      <div>
        <h2>Select</h2>

        <label class="cs-select__label" for="cars">Choose a car:</label>
        <select class="cs-select" name="cars" id="cars">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="opel">Opel</option>
          <option value="audi">Audi</option>
        </select>

        <div class="code-block">
          <button class="cs-btn toggle-vision">Show code</button>

          <div class="inner hidden">
            <button class="cs-btn">Copy</button>

            <pre><code id="code-block">&lt;label class=&quot;cs-select__label&quot; for=&quot;cars&quot;&gt;Choose a car:&lt;/label&gt;
&lt;select class=&quot;cs-select&quot; name=&quot;cars&quot; id=&quot;cars&quot;&gt;
  &lt;option value=&quot;volvo&quot;&gt;Volvo&lt;/option&gt;
  &lt;option value=&quot;saab&quot;&gt;Saab&lt;/option&gt;
  &lt;option value=&quot;opel&quot;&gt;Opel&lt;/option&gt;
  &lt;option value=&quot;audi&quot;&gt;Audi&lt;/option&gt;
&lt;/select&gt;</code></pre>
          </div>
        </div>
      </div>
      <div>
        <h2>Radio Group</h2>

        <fieldset class="cs-fieldset">
          <legend>What is your favorite wild animal?</legend>
          <div class="radio-wrapper">
            <input type="radio" name="animal" id="elephant" />
            <label for="elephant">Elephant</label>
          </div>
          <div class="radio-wrapper">
            <input type="radio" name="animal" id="monkey" />
            <label for="monkey">Monkey</label>
          </div>
          <div class="radio-wrapper">
            <input type="radio" name="animal" id="cheetah" />
            <label for="cheetah">Cheetah</label>
          </div>
          <div class="radio-wrapper">
            <input type="radio" name="animal" id="giraffe" />
            <label for="giraffe">Giraffe</label>
          </div>
        </fieldset>

        <div class="code-block">
          <button class="cs-btn toggle-vision">Show code</button>

          <div class="inner hidden">
            <button class="cs-btn">Copy</button>

            <pre><code id="code-block">&lt;fieldset class=&quot;cs-fieldset&quot;&gt;
  &lt;legend&gt;What is your favorite wild animal?&lt;/legend&gt;
  &lt;div class=&quot;radio-wrapper&quot;&gt;
    &lt;input type=&quot;radio&quot; name=&quot;animal&quot; id=&quot;elephant&quot; /&gt;
    &lt;label for=&quot;elephant&quot;&gt;Elephant&lt;/label&gt;
  &lt;/div&gt;
  &lt;div class=&quot;radio-wrapper&quot;&gt;
    &lt;input type=&quot;radio&quot; name=&quot;animal&quot; id=&quot;monkey&quot; /&gt;
    &lt;label for=&quot;monkey&quot;&gt;Monkey&lt;/label&gt;
  &lt;/div&gt;
  &lt;div class=&quot;radio-wrapper&quot;&gt;
    &lt;input type=&quot;radio&quot; name=&quot;animal&quot; id=&quot;cheetah&quot; /&gt;
    &lt;label for=&quot;cheetah&quot;&gt;Cheetah&lt;/label&gt;
  &lt;/div&gt;
  &lt;div class=&quot;radio-wrapper&quot;&gt;
    &lt;input type=&quot;radio&quot; name=&quot;animal&quot; id=&quot;giraffe&quot; /&gt;
    &lt;label for=&quot;giraffe&quot;&gt;Giraffe&lt;/label&gt;
  &lt;/div&gt;
&lt;/fieldset&gt;</code></pre>
          </div>
        </div>
      </div>
      <div>
        <h2>Slider</h2>

        <div class="cs-slider">
          <div class="value">
            <p>Dark</p>
            <p>Light</p>
          </div>
          <div class="ruler"></div>
          <input id="range" type="range" min="1" max="100" value="50" />
          <label for="range">Brightness</label>
        </div>

        <div class="code-block">
          <button class="cs-btn toggle-vision">Show code</button>

          <div class="inner hidden">
            <button class="cs-btn">Copy</button>

            <pre><code id="code-block">&lt;div class=&quot;cs-slider&quot;&gt;
  &lt;div class=&quot;value&quot;&gt;
    &lt;p&gt;Dark&lt;/p&gt;
    &lt;p&gt;Light&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class=&quot;ruler&quot;&gt;&lt;/div&gt;
  &lt;input id=&quot;range&quot; type=&quot;range&quot; min=&quot;1&quot; max=&quot;100&quot; value=&quot;50&quot; /&gt;
  &lt;label for=&quot;range&quot;&gt;Brightness&lt;/label&gt;
&lt;/div&gt;</code></pre>
          </div>
        </div>
      </div>
      <div>
        <h2>Dialog</h2>

        <section>
          <button
            type="button"
            class="cs-btn"
            onclick="document.querySelector('.cs-dialog').showModal();"
          >
            Open dialog
          </button>
          <dialog class="cs-dialog">
            <form method="dialog">
              <div class="heading">
                <div class="wrapper">
                  <div class="icon"></div>
                  <p class="text">Options</p>
                </div>
                <button class="cs-btn close"></button>
              </div>
              <div class="content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Distinctio ad suscipit aut asperiores laudantium error amet
                sapiente et tempora numquam voluptates, velit sint quos
                exercitationem unde obcaecati deleniti maiores officia natus
                ipsa rem fuga commodi esse. Sunt repellendus ipsa illo a
                accusantium consequuntur nihil dicta necessitatibus porro,
                saepe, sed repudiandae!
              </div>
              <menu class="footer-btns">
                <button class="cs-btn">OK</button>
                <button class="cs-btn">Cancel</button>
                <button class="cs-btn">Apply</button>
              </menu>
            </form>
          </dialog>
        </section>

        <div class="code-block">
          <button class="cs-btn toggle-vision">Show code</button>

          <div class="inner hidden">
            <button class="cs-btn">Copy</button>

            <pre><code id="code-block">&lt;section&gt;
  &lt;button
    type=&quot;button&quot;
    class=&quot;cs-btn&quot;
    onclick=&quot;document.querySelector(&apos;.cs-dialog&apos;).showModal();&quot;
  &gt;
    Open dialog
  &lt;/button&gt;
  &lt;dialog class=&quot;cs-dialog&quot;&gt;
    &lt;form method=&quot;dialog&quot;&gt;
      &lt;div class=&quot;heading&quot;&gt;
        &lt;div class=&quot;wrapper&quot;&gt;
          &lt;div class=&quot;icon&quot;&gt;&lt;/div&gt;
          &lt;p class=&quot;text&quot;&gt;Options&lt;/p&gt;
        &lt;/div&gt;
        &lt;button class=&quot;cs-btn close&quot;&gt;&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class=&quot;content&quot;&gt;
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Distinctio ad suscipit aut asperiores laudantium error amet
        sapiente et tempora numquam voluptates, velit sint quos
        exercitationem unde obcaecati deleniti maiores officia natus
        ipsa rem fuga commodi esse. Sunt repellendus ipsa illo a
        accusantium consequuntur nihil dicta necessitatibus porro,
        saepe, sed repudiandae!
      &lt;/div&gt;
      &lt;menu class=&quot;footer-btns&quot;&gt;
        &lt;button class=&quot;cs-btn&quot;&gt;OK&lt;/button&gt;
        &lt;button class=&quot;cs-btn&quot;&gt;Cancel&lt;/button&gt;
        &lt;button class=&quot;cs-btn&quot;&gt;Apply&lt;/button&gt;
      &lt;/menu&gt;
    &lt;/form&gt;
  &lt;/dialog&gt;
&lt;/section&gt;</code></pre>
          </div>
        </div>
      </div>
      <div>
        <h2>Tooltip</h2>

        <div class="cs-tooltip">
          Right
          <span style="left: 125%" class="text">Tooltip text</span>
        </div>
        <br />
        <div class="cs-tooltip">
          Left
          <span style="right: 125%" class="text">Tooltip text</span>
        </div>
        <br />
        <div class="cs-tooltip">
          Top
          <span
            style="bottom: 100%; width: 100px; left: 50%; margin-left: -50px"
            class="text"
            >Tooltip text</span
          >
          <!-- set some width, and then set margin-left to be half of the width -->
        </div>
        <br />
        <div class="cs-tooltip">
          Bottom
          <span
            style="top: 100%; width: 100px; left: 50%; margin-left: -50px"
            class="text"
            >Tooltip text</span
          >
          <!-- set some width, and then set margin-left to be half of the width -->
        </div>

        <div class="code-block">
          <button class="cs-btn toggle-vision">Show code</button>

          <div class="inner hidden">
            <button class="cs-btn">Copy</button>

            <pre><code id="code-block">&lt;div class=&quot;cs-tooltip&quot;&gt;
  Right
  &lt;span style=&quot;left: 125%&quot; class=&quot;text&quot;&gt;Tooltip text&lt;/span&gt;
&lt;/div&gt;
&lt;br /&gt;
&lt;div class=&quot;cs-tooltip&quot;&gt;
  Left
  &lt;span style=&quot;right: 125%&quot; class=&quot;text&quot;&gt;Tooltip text&lt;/span&gt;
&lt;/div&gt;
&lt;br /&gt;
&lt;div class=&quot;cs-tooltip&quot;&gt;
  Top
  &lt;span
    style=&quot;bottom: 100%; width: 100px; left: 50%; margin-left: -50px&quot;
    class=&quot;text&quot;
    &gt;Tooltip text&lt;/span
  &gt;
  &lt;!-- set some width, and then set margin-left to be half of the width --&gt;
&lt;/div&gt;
&lt;br /&gt;
&lt;div class=&quot;cs-tooltip&quot;&gt;
  Bottom
  &lt;span
    style=&quot;top: 100%; width: 100px; left: 50%; margin-left: -50px&quot;
    class=&quot;text&quot;
    &gt;Tooltip text&lt;/span
  &gt;
  &lt;!-- set some width, and then set margin-left to be half of the width --&gt;
&lt;/div&gt;</code></pre>
          </div>
        </div>
      </div>
      <div>
        <h2>Progress Bar</h2>

        <div class="cs-progress-bar">
          <div style="width: 50%" class="bars"></div>
        </div>

        <div class="code-block">
          <button class="cs-btn toggle-vision">Show code</button>

          <div class="inner hidden">
            <button class="cs-btn">Copy</button>

            <pre><code id="code-block">&lt;div class=&quot;cs-progress-bar&quot;&gt;
  &lt;div style=&quot;width: 50%&quot; class=&quot;bars&quot;&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
          </div>
        </div>
      </div>
      <div>
        <h2>Tabs</h2>

        <div class="cs-tabs">
          <input
            class="radiotab"
            name="tabs"
            tabindex="1"
            type="radio"
            id="tabone"
            checked="checked"
          />
          <label class="label" for="tabone">Tab One</label>
          <div class="panel" tabindex="1">
            <h2>Tab One Content</h2>
            <p>Tab content...</p>
          </div>
          <input
            class="radiotab"
            tabindex="1"
            name="tabs"
            type="radio"
            id="tabtwo"
          />
          <label class="label" for="tabtwo">Tab Two</label>
          <div class="panel" tabindex="1">
            <h2>Tab Two Content</h2>
            <p>Tab content...</p>
          </div>
          <input
            class="radiotab"
            tabindex="1"
            name="tabs"
            type="radio"
            id="tabthree"
          />
          <label class="label" for="tabthree">Tab Three</label>
          <div class="panel" tabindex="1">
            <h2>Tab Three Content</h2>
            <p>Tab content...</p>
          </div>
        </div>

        <div class="code-block">
          <button class="cs-btn toggle-vision">Show code</button>

          <div class="inner hidden">
            <button class="cs-btn">Copy</button>

            <pre><code id="code-block">&lt;div class=&quot;cs-tabs&quot;&gt;
  &lt;input
    class=&quot;radiotab&quot;
    name=&quot;tabs&quot;
    tabindex=&quot;1&quot;
    type=&quot;radio&quot;
    id=&quot;tabone&quot;
    checked=&quot;checked&quot;
  /&gt;
  &lt;label class=&quot;label&quot; for=&quot;tabone&quot;&gt;Tab One&lt;/label&gt;
  &lt;div class=&quot;panel&quot; tabindex=&quot;1&quot;&gt;
    &lt;h2&gt;Tab One Content&lt;/h2&gt;
    &lt;p&gt;Tab content...&lt;/p&gt;
  &lt;/div&gt;
  &lt;input
    class=&quot;radiotab&quot;
    tabindex=&quot;1&quot;
    name=&quot;tabs&quot;
    type=&quot;radio&quot;
    id=&quot;tabtwo&quot;
  /&gt;
  &lt;label class=&quot;label&quot; for=&quot;tabtwo&quot;&gt;Tab Two&lt;/label&gt;
  &lt;div class=&quot;panel&quot; tabindex=&quot;1&quot;&gt;
    &lt;h2&gt;Tab Two Content&lt;/h2&gt;
    &lt;p&gt;Tab content...&lt;/p&gt;
  &lt;/div&gt;
  &lt;input
    class=&quot;radiotab&quot;
    tabindex=&quot;1&quot;
    name=&quot;tabs&quot;
    type=&quot;radio&quot;
    id=&quot;tabthree&quot;
  /&gt;
  &lt;label class=&quot;label&quot; for=&quot;tabthree&quot;&gt;Tab Three&lt;/label&gt;
  &lt;div class=&quot;panel&quot; tabindex=&quot;1&quot;&gt;
    &lt;h2&gt;Tab Three Content&lt;/h2&gt;
    &lt;p&gt;Tab content...&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
          </div>
        </div>
      </div>
    </main>

    <footer>
      Released under MIT License. Made by
      <a target="_blank" href="http://samke.me">Samuel</a>.
    </footer>

    <script type="module" src="./src/main.js"></script>
  </body>
</html>
